import { useState } from "react";
import { Button } from "antd-mobile"
/* 
    ButtonAgain对Button的二次封装
        解决问题：点击按钮，在异步操作中的一种函数防抖[例如：避免重复点击提交数据请求]
        点击按钮做啥事，一定要给予onClick处理！！
*/
const ButtonAgain = (props) => {
    /* props中包含了调用<Button>组件时候的属性 */
    let options = { ...props };
    let { children, onClick: handle } = options;
    delete options.children;
    /* 状态 */
    let [loading, setLoading] = useState(false);
    const clickHandle = async () => {
        setLoading(true);
        try {
            await handle();
        } catch (_) { }
        setLoading(false);
    }
    if(handle){
        options.onClick = clickHandle
    }
    return <Button {...options} loading={loading} onClick={clickHandle}>
        {children}
    </Button>
}
export default ButtonAgain